const menuItems = [
    {
        index: '1',
        title: '图书管理',
        icon: 'fa-solid fa-book-open',
        children: [
            {
                index: '1-1',
                label: '图书列表',
                icon: 'fa-solid fa-list',
                url: '/admin/book/book'
            },
            {
                index: '1-2',
                label: '图书分类',
                icon: 'fa-solid fa-folder-open',
                url: '/admin/book/bookCategory'
            },
            {
                index: '1-3',
                label: '图书副本管理',
                icon: 'fa-solid fa-copy',
                url: '/admin/book/bookCopy'
            }
        ]
    },
    {
        index: '2',
        title: '读者管理',
        icon: 'fa-solid fa-users',
        children: [
            {
                index: '2-1',
                label: '读者列表',
                icon: 'fa-solid fa-user',
                url: '/admin/reader/reader'
            },
            {
                index: '2-2',
                label: '部门管理',
                icon: 'fa-solid fa-building',
                url: '/admin/reader/dept'
            }
        ]
    },
    {
        index: '3',
        title: '借阅管理',
        icon: 'fa-solid fa-exchange',
        children: [
            {
                index: '3-1',
                label: '借阅记录',
                icon: 'fa-solid fa-check',
                url: '/borrowing/records'
            },
            // {
            //     index: '3-2',
            //     label: '续借管理',
            //     icon: 'fa-solid fa-sync',
            //     url: '/borrowing/renewals'
            // },
            {
                index: '3-3',
                label: '预约管理',
                icon: 'fa-solid fa-clock',
                url: '/borrowing/reservations'
            },
            {
                index: '3-4',
                label: '逾期管理',
                icon: 'fa-solid fa-exclamation-triangle',
                url: '/borrowing/overdues'
            }
        ]
    },
    {
        index: '4',
        title: '系统管理',
        icon: 'fa-solid fa-cog',
        children: [
            {
                index: '4-1',
                label: '用户管理',
                icon: 'fa-solid fa-users',
                url: '/admin/system/user'
            },
            {
                index: '4-2',
                label: '角色管理',
                icon: 'fa-solid fa-list',
                url: '/admin/system/role'
            }
        ]
    },
    {
        index: '5',
        title: '用户中心',
        icon: 'fa-solid fa-user-circle',
        children: [
            {
                index: '5-1',
                label: '修改密码',
                icon: 'fa-solid fa-key',
                url: '/user/password'
            }
        ]
    }
];

const AppSidebar = {
    name: 'AppSidebar',
    template: `
     <el-aside :class="{ collapsed: sidebarCollapsed }">
                <div class="sidebar-header">
                    <img src="/site/images/bookshelf.png" alt="Library Icon">
                </div>
                <el-menu
                    default-active="1"
                    :default-openeds="defaultOpeneds"
                    class="el-menu-vertical-demo"
                    :collapse="sidebarCollapsed"
                    background-color="#344a5f"
                    text-color="#fff"
                    active-text-color="#ffd04b">
                    <template v-for="item in menuItems" :key="item.index">
                      <el-sub-menu :index="item.index">
                          <template #title>
                              <i :class="item.icon"></i>
                              <span>{{ item.title }}</span>
                          </template>
                          <el-menu-item v-for="child in item.children" :key="child.index" :index="child.index" @click="navigateTo(child.url)">
                              <i :class="child.icon"></i>
                              <span>{{ child.label }}</span>
                          </el-menu-item>
                      </el-sub-menu>
                    </template>
                </el-menu>
            </el-aside>
  `,
    props: {
        sidebarCollapsed: {
            type: Boolean,
            default: false
        }
    },
    setup(props, { emit }) {
        const navigateTo = (path) => {
            if (window.router) {
                window.router.push(path);
            } else {
                window.location.href = path;
            }
        };
        const defaultOpeneds = menuItems.map(item => item.index);
        return {
            menuItems,
            navigateTo,
            defaultOpeneds
        };
    }
};